<template>
	<div>
		<el-table ref="multipleTable" :data="tableData" stripe row-key="id" style="width: 100%" v-loading="loading" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" reserve-selection></el-table-column>
			<!-- <el-table-column type="index" label="排序" width="50"></el-table-column> -->
			<el-table-column prop="title" label="文章标题" show-overflow-tooltip>
				<template slot-scope="{ row }">
					<el-tag effect="dark" size="mini" type="danger" style="margin: 0 2px" disable-transitions v-show="row.isTop == 1">置顶</el-tag>
					<el-tag effect="dark" size="mini" type="warning" style="margin: 0 2px" disable-transitions v-show="row.isHeadlines == 1">头条</el-tag>
					<el-tag effect="dark" size="mini" type="success" style="margin: 0 2px" disable-transitions v-show="row.isRecommended == 1">推荐</el-tag>
					<span class="cup" @click="handleEdit(row)">{{ row.title }}</span>
				</template>
			</el-table-column>

			<el-table-column prop="author" label="作者" width="100" show-overflow-tooltip>
				<template slot-scope="{ row }">
					<span>{{ row.author || '--' }}</span>
				</template>
			</el-table-column>
			<el-table-column prop="clickCount" label="点击数" width="100" align="center"></el-table-column>
			<el-table-column prop="collect" label="数据来源" width="100" align="center">
				<template slot-scope="{ row }">
					<span>
						{{ row.collect && row.collect == 'Y' ? '数据采集' : '默认来源' }}
					</span>
				</template>
			</el-table-column>
			<el-table-column prop="status" label="发布状态" width="100">
				<template slot-scope="{ row }">
					<el-switch v-model="row.status" active-value="1" inactive-value="0" :disabled="row.auditStatus != 2" @change="handleStatus(row)"></el-switch>
				</template>
			</el-table-column>
			<el-table-column prop="createTime" label="创建时间" width="180"></el-table-column>
			<el-table-column label="操作" width="120">
				<template slot-scope="{ row }">
					<el-dropdown split-button type="primary" size="small">
						<span @click="handlePreview(row)">预览</span>
						<el-dropdown-menu slot="dropdown">
							<el-dropdown-item @click.native="handleEdit(row)">编辑</el-dropdown-item>
							<el-dropdown-item @click.native="handleMove(row)">投递</el-dropdown-item>
							<!-- <el-dropdown-item v-if="row.auditStatus == 2 && row.isTop != 1" @click.native="handleChangeState(row, 'isTop', 1)">设置置顶</el-dropdown-item>
							<el-dropdown-item v-if="row.auditStatus == 2 && row.isTop == 1" @click.native="handleChangeState(row, 'isTop', 0)">取消置顶</el-dropdown-item>
							<el-dropdown-item v-if="row.auditStatus == 2 && row.isHeadlines != 1" @click.native="handleChangeState(row, 'isHeadlines', 1)">
								设置头条
							</el-dropdown-item>
							<el-dropdown-item v-if="row.auditStatus == 2 && row.isHeadlines == 1" @click.native="handleChangeState(row, 'isHeadlines', 0)">
								取消头条
							</el-dropdown-item>
							<el-dropdown-item v-if="row.auditStatus == 2 && row.isRecommended != 1" @click.native="handleChangeState(row, 'isRecommended', 1)">
								设置推荐
							</el-dropdown-item>
							<el-dropdown-item v-if="row.auditStatus == 2 && row.isRecommended == 1" @click.native="handleChangeState(row, 'isRecommended', 0)">
								取消推荐
							</el-dropdown-item> -->
							<el-dropdown-item @click.native="handleDelete(row)">删除</el-dropdown-item>
						</el-dropdown-menu>
					</el-dropdown>
				</template>
			</el-table-column>
			<div slot="empty" class="emptyBg">
				<el-empty :image-size="200"></el-empty>
			</div>
		</el-table>
		<Pagination v-show="parseInt(pageObj.count) > 0" :total="parseInt(pageObj.count)" @change="getList" :page.sync="listQuery.page" :limit.sync="listQuery.limit" />
	</div>
</template>
<script>
import submitAudit from '../Journal/Content/submitAudit';
export default {
	mixins: [submitAudit],
	data() {
		return {
			loading: false,
			listQuery: {
				page: 1,
				limit: 10,
				// classifyId: '',
				classifyId: '',
				sort: 'create_time desc'
			},
			tableData: [],
			pageObj: {}
		};
	},
	props: ['columnId'],
	computed: {
		auditReason() {
			return (row) => {
				if (!row.auditReason) return;
				return row.auditStatus == 2 || row.auditStatus == 3;
			};
		}
	},
	mounted() {
		this.getList();
		this.$bus.$on('refreshNewsContentsList', (v,type) => {
			if (v) {
				Object.assign(this.listQuery, v);
			}
			if(type!=1){
				this.listQuery.page=1;
			}
			this.getList();
			this.$refs.multipleTable.clearSelection();
		});
	},
	beforeDestroy() {
		this.$bus.$off('refreshNewsContentsList');
	},
	watch: {
		columnId: {
			handler() {
				this.getList();
				this.$refs.multipleTable.clearSelection();
			}
		}
	},
	methods: {
		async getList() {
			this.loading = true;
			this.listQuery.classifyId = this.columnId;
			let res = await this.$store.dispatch('queryNewsContents', this.listQuery);
			this.tableData = res.data;
			this.pageObj = res;
			this.loading = false;
		},
		//编辑
		handleEdit(row) {
			this.$bus.$emit('showDialogNewsContentsAdd', row);
		},
		//预览
		handlePreview(row) {
			this.$bus.$emit('collectLogPreview', row);
		},
		//查看审核流程
		handleLookFlow(row) {
			let businessKey = 2 + ':' + row.id;
			this.$set(row, 'businessKey', businessKey);
			this.$bus.$emit('showDialogFlowInfo', row);
		},
		//移动
		handleMove(row) {
			this.$bus.$emit('articleMove', row);
		},
		//批量操作
		handleSelectionChange(val) {
			this.$bus.$emit('deleteBatchNewsContents', val);
		},
		//发布
		async handleStatus(row) {
			await this.$store.dispatch('updateNewsContents', row);
			this.getList();
		},
		//删除
		handleDelete(row) {
			this.deleteTips(() => {
				this.delete(row);
			});
		},
		async delete(row) {
			await this.$store.dispatch('deleteNewsContents', row);
			this.getList();
		},
		//0.暂存|1.提交审核
		async handleAudit(row, auditStatus) {
			let obj = {
				id: row.id,
				auditStatus
			};
			await this.$store.dispatch('updateNewsContents', obj);
			this.getList();
		},
		//置顶-isTop 推荐-isRecommended 头条-isHeadlines 精选-isSelection
		async handleChangeState(row, arg, val) {
			let obj = {
				id: row.id
			};
			obj[arg] = val;
			await this.$store.dispatch('updateNewsContents', obj);
			this.getList();
		},

		//移动
		handleMove(row) {
			this.$bus.$emit('articleMove', row);
		}
	}
};
</script>
